<template>
<view class="settleItem">
    <view class="settleItem__shop">
        <label>
          <van-checkbox
			  :value="is_shop_chosen"
			  checked-color="red"
			  @change="onChange_is_shop_chosen">
			  <view class="flex">
				  <text class="settleItem__shop-name">{{ shopData.supplier_name }}</text>
				  <image 
					src="/static/more--grey.png" 
					class="settleItem__shop-img" 
					@click.stop="onClickMore"/>
			  </view>
		  </van-checkbox>
        </label>
    </view>
    <product-item
        v-for="(product_data, idx) in shopData.product_data"
        :product-data="product_data"
		:idx-of-shop="props.idxInCart"
		:idx-of-product="idx"
    />
</view>
</template>

<script setup>
	import {ref, onMounted, watch} from "vue"
	import ProductItem from "@/components/mall/secondLevel/product/productItem.vue";
	
	import { storeToRefs } from 'pinia';
	import { useIsChosenStore } from '@/components/mall/stores/isChosen.js'
	const { isChosen, computePrice } = storeToRefs(useIsChosenStore())
	const { updateIsChosen } = useIsChosenStore()
	
	const props = defineProps({
	  shopData: {
		type: Object,
		required: true
	  },
	  idxInCart: {
		  type: Number,
		  required: true
	  }
	});
	// 商店是否选择的变量与修改函数
	const is_shop_chosen = ref(isChosen.value[props.idxInCart]?.shop || false)
	function onChange_is_shop_chosen(event){
	  // 更新 is_product_chosen 状态
	  is_shop_chosen.value = event.detail;
	  console.log('当前状态:', is_shop_chosen.value ? '选中' : '未选中');
	}
	// 添加全局状态与is_shop_chosen的双向绑定
	watch(is_shop_chosen, (newData)=>{
		console.log("全局状态随is_shop_chosen发生变化");
		updateIsChosen(newData, props.idxInCart);
	})
	watch(()=>isChosen.value[props.idxInCart].shop, ()=>{
		console.log("is_shop_chosen随全局状态发生变化");
		is_shop_chosen.value = isChosen.value[props.idxInCart].shop;
	})
	
	// 各种点击事件
	function onClickMore(){
		console.log("点击more图标")
	}
	
	
	onMounted(()=>{
		// console.log("settleItem: is_shop_chosen: ", is_shop_chosen.value);
		// console.log("settleItem: shopData: ", props.shopData);
	})
</script>

<style lang="scss">
	.settleItem{
		margin: 10rpx 10rpx 10rpx 10rpx;
		padding: 20rpx 20rpx 20rpx 20rpx;
		border-radius: 40rpx;
		background-color: #ffffff;
		&__shop{
			margin-bottom: 30rpx;
			&-name{
				font-size: 15px;
				font-weight: bold;
			}
			&-img{
				margin-left: 5rpx;
				height: 40rpx;
				width: 40rpx;
				object-fit: cover;
			}
		}
	}
	.orders{
		
	}
</style>